<template>
    <div class="teacher-add-container">
        <el-card class="box-card">
            <template #header>
                <div class="header-title">课程信息添加</div>
            </template>
            <el-form :model="form" label-width="120px">
                <el-form-item label="课程号">
                    <el-input v-model="form.course_id" placeholder="请输入课程号"></el-input>
                </el-form-item>
                <el-form-item label="学院">
                    <el-select v-model="form.college_id"  @change="handleCollegeChange" placeholder="请选择学院">
                        <el-option v-for="college in colleges" :key="college.id" :label="college.name"
                            :value="college.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="课程名">
                    <el-input v-model="form.name" placeholder="请输入课程名"></el-input>
                </el-form-item>
                <el-form-item label="学分">
                    <el-select v-model="form.credit" placeholder="请选择学分">
                        <el-option v-for="credit in credits" :key="credit.id" :label="credit.credit"
                            :value="credit.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="教师">
                    <el-select v-model="form.teacher_id" placeholder="请选择教师">
                        <el-option v-for="teacher in teachers" :key="teacher.teacher_id" :label="teacher.name"
                            :value="teacher.teacher_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="ISBN">
                    <el-input v-model="form.gender" placeholder="请输入ISBN"></el-input>
                </el-form-item>
                <el-form-item label="教材名">
                    <el-select v-model="form.position" placeholder="请选择教材名">
                        <el-option v-for="position in positions" :key="position.id" :label="position.name"
                            :value="position.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm" class="submit-btn">点击提交</el-button>
                    <el-button @click="cancelAdd" class="cancel-btn">取消添加</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { ElMessage } from 'element-plus';
import router from '@/router';
import axios from 'axios';

// 表单数据
const form = ref({
    course_id: '',
    college_id: '',
    credit: '',
    name: '',
    teacher_id :'',
    textbook_id : '',
});

// 模拟学院数据（实际从后端获取）
const colleges = ref([]);

// 模拟职位数据（实际从后端获取）
const credits = ref([]);

const teachers = ref([]);

// 提交表单
const submitForm = () => {
    // 此处添加实际提交逻辑（调用后端接口）

    axios.post("http://127.0.0.1:8000/course/add/",form.value)
    .then(res => {
        console.log(res)
    })
    .catch(err => {
        console.error(err); 
    })

    ElMessage.success('提交成功');
    router.back(); // 返回上一页
};

//获取学院
const get_college = () =>{
    axios.get('http://127.0.0.1:8000/course/college/')
    .then(res => {
        colleges.value = res.data.data
        console.log(res)
    })
    .catch(err => {
        console.error(err); 
    })
}

//获取学分
const get_credit = () =>{
    axios.get('http://127.0.0.1:8000/course/credit/')
    .then(res => {
        credits.value = res.data.data
        console.log(res)
    })
    .catch(err => {
        console.error(err); 
    })
}

//获取教师
const get_teacher = (collegeId) =>{
    axios.get('http://127.0.0.1:8000/course/one/'+collegeId)
    .then(res => {
        teachers.value = res.data.data
        console.log(res)
    })
    .catch(err => {
        console.error(err); 
    })
}


// 取消添加
const cancelAdd = () => {
    router.back(); // 返回上一页
};

const handleCollegeChange = (collegeId) => {

    console.log('学院选择变化，ID:', collegeId);
    form.value.college_id = collegeId; // 更新表单中的学院ID
    get_teacher(collegeId); // 根据学院ID获取课程
}


onMounted(() => {
   get_college()
   get_credit()
//     // 初始化操作
});

onUnmounted(() => {
    // 组件卸载操作
});
</script>

<style scoped>
.teacher-add-container {
    padding: 20px;
}

.box-card {
    border: 1px solid #e4e7ed;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    width: 1000px;
    /* 增大卡片整体宽度 */
}

.header-title {
    font-size: 18px;
    font-weight: 600;
    color: #2c8cff;
    padding: 12px 20px;
    border-bottom: 1px solid #e4e7ed;
    margin-bottom: 20px;
}

.el-form-item {
    margin-bottom: 20px;
}

.el-form-item__label {
    color: #606266;
    font-weight: 500;
}

.el-input__inner,
.el-select__inner {
    height: 45px;
    /* 增加输入框高度 */
    border-radius: 8px;
    /* 增大圆角 */
    border: 1px solid #dcdfe6;
    font-size: 16px;
    width: 400px;
    /* 显著增大输入框宽度 */
}

.el-input__inner:focus,
.el-select__inner:focus {
    outline: none;
    border-color: #2c8cff;
    box-shadow: 0 0 0 2px rgba(44, 140, 255, 0.1);
}

.submit-btn {
    background-color: #2c8cff;
    border-color: #2c8cff;
    color: white;
    padding: 12px 30px;
    /* 增大按钮内边距 */
    font-size: 16px;
    transition: background-color 0.2s;
}

.submit-btn:hover {
    background-color: #1a73e8;
}

.cancel-btn {
    color: #606266;
    border: 1px solid #dcdfe6;
    padding: 12px 30px;
    /* 增大按钮内边距 */
    font-size: 16px;
    background-color: white;
    transition: all 0.2s;
}

.cancel-btn:hover {
    border-color: #606266;
    color: #606266;
}

.el-textarea__inner {
    height: 120px;
    /* 增加文本域高度 */
    border-radius: 8px;
    /* 增大圆角 */
    border: 1px solid #dcdfe6;
    width: 400px;
    /* 增大文本域宽度 */
    font-size: 16px;
}

.el-textarea__inner:focus {
    outline: none;
    border-color: #2c8cff;
    box-shadow: 0 0 0 2px rgba(44, 140, 255, 0.1);
}
</style>